import {
  Table,
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  Modal,
  message
} from 'antd';

import React from 'react';
import { connect } from 'dva';
const R = require('ramda');
const FormItem = Form.Item;
import router from 'umi/router';
import Constants from '../utils/Constants';

const outbuyForm = Form.create()(
  class OutbuyForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        open: false,
        crifdata: {}
      };
    }

    handleOpen = (crifdata) => {
      this.setState({ open: true, crifdata });
    };

    handleCancel = () => {
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    handleConfirm = () => {
      const {form: {validateFields}, dispatch} = this.props;

      validateFields((errors, values) => {
        if (errors) return;

        let dataSource = {...this.state.crifdata};
        values.reportType = 2;
        values.idtype = "SUPPLIER_ID";
        values.idnumber = dataSource.idnumber;
        values.providername = dataSource.providername;
        values.countrycode = dataSource.countrycode;

        dispatch({
          type: "foreignTraderQuery/saveOutbuyerInfo",
          payload: {
            ...values,
            onSuccess: (data) => {
              if (!R.isNil(data) && !R.isEmpty(data)) {
                this.handleCancel();
                router.push('/pay/payConfirm?goodsId=' + Constants.NUMBER_SIX + '&entityid=' + data.id + '&bussinesstype=' + Constants.SERVICE.OUTBUYER_SERVICE + '&extra=' + dataSource.countrycode);
              }
            }
          }
        });

      });
    };

    render() {
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };
      const dataSource = this.state.crifdata;

      let footer = [];
      footer.push(
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );
      footer.push(
        <Button
          key="submit"
          size="large"
          type="primary"
          loading={this.props.loading}
          onClick={this.handleConfirm.bind(this)}
        >
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="立即申请"
          visible={this.state.open}
          footer={footer}
          width={800}
          onCancel={this.handleCancel}
        >
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="供应商名称" hasFeedback>
                  {getFieldDecorator('clientName', {
                    rules: [{
                      required: true, message: '请输入供应商名称！'
                    }],
                  })(
                    <Input maxLength="100" />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="供应商地址" hasFeedback>
                  {getFieldDecorator('clientAddress', {
                    rules: [
                      {
                        required: true,
                        message: '请输入供应商地址！',
                      },
                    ],
                  })(<Input maxLength="500" />)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="供应商负责人" hasFeedback>
                  {getFieldDecorator('clientChargePerson', {
                    rules: [
                      {
                        required: true,
                        message: '请输入供应商负责人！',
                      },
                    ],
                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="负责人邮箱" hasFeedback>
                  {getFieldDecorator('clientEmail', {
                    rules: [
                      {
                        required: true,
                        message: '请输入负责人邮箱！',
                      },
                    ],
                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="买家名称" hasFeedback>
                  {getFieldDecorator('buyer', {
                    rules: [
                      {
                        required: true,
                        message: '请输入买家名称！',
                      },
                    ],
                    initialValue: dataSource.buyer,
                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="买家地址" hasFeedback>
                  {getFieldDecorator('address', {
                    rules: [
                      {
                        required: true,
                        message: '请输入买家地址！',
                      },
                    ],
                    initialValue: dataSource.address,
                  })(<Input maxLength="500" />)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="买家电话" hasFeedback>
                  {getFieldDecorator('phone', {
                    rules: [
                      {
                        required: true,
                        message: '请输入买家电话！',
                      },
                    ],

                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="运输方式" hasFeedback>
                  {getFieldDecorator('transport', {
                    rules: [
                      {
                        required: true,
                        message: '请输入运输方式',
                      },
                    ],
                  })(<Input maxLength="100" placeholder="示例:海陆空 铁路 多式联运"/>)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="付款方式" hasFeedback>
                  {getFieldDecorator('paymentType', {
                    rules: [
                      {
                        required: true,
                        message: '请输入付款方式！',
                      },
                    ],
                  })(<Input maxLength="100" placeholder="示例:T/T L/C OA XX DAYS" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="所需信用额度" hasFeedback>
                  {getFieldDecorator('creditLimit', {
                    rules: [
                      {
                        required: true,
                        message: '请输入所需信用额度',
                      },
                    ],
                  })(<Input maxLength="100" placeholder="示例 金额+币种" />)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="是否存在历史交易" hasFeedback>
                  {getFieldDecorator('hisTransactions', {
                    rules: [
                      {
                        required: true,
                        message: '请输入是否存在历史交易！',
                      },
                    ],
                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="出口商品名称" hasFeedback>
                  {getFieldDecorator('commodity', {
                    rules: [
                      {
                        required: true,
                        message: '请输入出口商品名称',
                      },
                    ],
                  })(<Input maxLength="100" />)}
                </FormItem>
              </Col>
            </Row>

          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state) {
  return {
    loading: state.loading.models.foreignTraderQuery,
  };
}

export default connect(mapStateToProps)(outbuyForm);
